<template>
	<view class="personal_center_uni-container">
		<view class="bg_view" :style="backgroundStyle">
			<view class="erweima_setting_view">
				<view class="erweima_img_view" @click="showQrcodeModal">
					<image :src="qrCodeImg" mode="aspectFill" class="erweima_image"></image>
				</view>
				<view class="setting_icon_view">
					<uni-icons type="gear" size="26" color="rgb(35, 35, 35)" @click="gotoSetting"></uni-icons>
				</view>
			</view>

			<view class="welcome_text_avatar_view">
				<view class="welcome_text_name_view">
					<view class="welcome_text_view">Hi,</view>
					<view class="welcome_user_name_view" @click="toHomePage">{{userName}}</view>
				</view>
				<view class="avatar_view_personal" @click="toHomePage">
					<image :src="avatarUrl" mode="aspectFill" class="avatar_image_personal"></image>
				</view>
			</view>
			<view class="login_btn" v-if="!isLogin || !isGetData">
				<button type="default" size="mini" plain class="btn_login" style="border-radius: 40rpx;"
					@click="toLoginPage">登录</button>
			</view>
			<view class="sing_btn" v-if="isLogin && isGetData" @click="toSignInPage">
				<button type="default" size="mini" plain class="btn_sign" style="border-radius: 40rpx;">签到领福利</button>
			</view>

			<!-- 关注，收藏，粉丝，帖子 -->
			<view class="guanzhu_collect_fans_tips">
				<view class="menu_list_item" v-for="(item,index) in headerBottomList" :key="index"
					@click="viewListPage(item)">
					<view class="menu_item_num">
						{{item.menuItemNum}}
					</view>
					<view class="menu_item_name_my">
						{{item.menuItemName}}
					</view>
				</view>
			</view>

		</view>
		<view class="my_person_main">
			<view class="menu_item" v-for="item in personalMenuList" @click="toDifferentPage(item)">
				<view class="menu_item_icon_view">
					<image :src="item.menuIcon" mode="aspectFill" class="menu_image_url"></image>
				</view>
				<view class="menu_item_name">
					{{item.menuName}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from '../../../request/login';
	import { checkIsLogin } from '@/common/util';
	export default {
		props: {

		},
		data() {
			return {
				isGetData: false, // 是否从后端获取到数据了
				userAid: 0, // 用户aid(我的)
				isLogin: false, // 是否登录
				qrCodeImg: '../../../static/qrCode.png',
				userName: '请登录！',
				bgImageUrl: 'https://img1.baidu.com/it/u=690844471,4027967545&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=749',
				avatarUrl: 'https://img2.baidu.com/it/u=3432825481,675999600&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
				personalMenuList: [{
						menuId: 1,
						menuIcon: '../../../static/icons/integral.png',
						menuName: '我的积分'
					},
					{
						menuId: 2,
						menuIcon: '../../../static/icons/order.png',
						menuName: '我的订单'
					},
					{
						menuId: 3,
						menuIcon: '../../../static/icons/historyRecord.png',
						menuName: '浏览历史'
					},
					{
						menuId: 4,
						menuIcon: '../../../static/icons/invitate_friends.png',
						menuName: '邀请好友'
					},
					{
						menuId: 5,
						menuIcon: '../../../static/icons/my_packageMoney.png',
						menuName: '我的钱包'
					},
					{
						menuId: 6,
						menuIcon: '../../../static/icons/myyouhuiquan.png',
						menuName: '优惠券'
					},
				],
				headerBottomList: [{
						menuItemName: '关注',
						menuItemNum: 0
					},
					{
						menuItemName: '粉丝',
						menuItemNum: 0
					},
					{
						menuItemName: '收藏',
						menuItemNum: 0
					},
					{
						menuItemName: '帖子',
						menuItemNum: 0
					},
				]
			}
		},

		onLoad() {
			// 判断是否登录了
			this.checkIsLogin();
			// 请求用户信息
			this.getUserInfo();
		},

		onShow() {
			// 判断是否登录，如果没有登录直接跳转登录页面
			checkIsLogin();
			// 判断是否登录了
			this.checkIsLogin();
			// 请求用户信息
			this.getUserInfo();
		},

		computed: {
			backgroundStyle() {
				return {
					backgroundImage: `url(${this.bgImageUrl})`,
					backgroundSize: 'cover',
				};
			}
		},
		methods: {

			// 点击关注，粉丝，收藏，帖子去不同的列表页面
			viewListPage(item) {
				if (item.menuItemName === '关注' || item.menuItemName === '粉丝') {
					uni.navigateTo({
						url: `/pages/tabBar/template/fans/fansAndFollowListPage?userAid=${this.userAid}&menuName=${item.menuItemName}`
					})
				} else if (item.menuItemName === '收藏') {
					uni.navigateTo({
						url: `/pages/tabBar/template/collect/myCollect?userAid=${this.userAid}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/tabBar/template/post/myPost?userAid=${this.userAid}`
					})
				}
			},

			// 去签到领福利页面
			toSignInPage() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none',
					duration: 1500
				})
				// uni.navigateTo({
				// 	url: '/pages/tabBar/template/signIn/signInPage'
				// })
			},

			// 去用户主页
			toHomePage() {
				uni.navigateTo({
					url: `/pages/tabBar/template/userDetailPage?aid=${this.userAid}`
				})
			},

			// 判断是否登录了
			checkIsLogin() {
				// console.log('是否登录：');
				this.isLogin = uni.getStorageSync("isLogin");
				// console.log(this.isLogin);
				if (this.isLogin != true) {
					this.isLogin = false;
				}
			},

			// 去设置页面
			gotoSetting() {
				uni.navigateTo({
					url: './settingPage'
				})
			},

			// 去登录页面
			toLoginPage() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},

			// 点击二维码图标弹出个人二维码
			showQrcodeModal() {
				uni.navigateTo({
					url: `/pages/tabBar/template/qrCode/myQrCodePage?userAid=${this.userAid}`
				})
			},

			// 请求用户信息
			getUserInfo() {
				// console.log("请求用户信息");
				if (this.isLogin) {
					getUserInfo().then(res => {
						// console.log(res);
						this.userAid = res.data.data.aid;
						this.userName = res.data.data.name;
						// console.log(this.userAid);
						uni.setStorageSync('userAid', this.userAid);
						uni.setStorageSync('userName', this.userName);
						this.avatarUrl = res.data.data.avatar;
						this.headerBottomList[0].menuItemNum = res.data.data.guanzhuNum;
						this.headerBottomList[1].menuItemNum = res.data.data.fans;
						this.headerBottomList[2].menuItemNum = res.data.data.collectNum;
						this.headerBottomList[3].menuItemNum = res.data.data.posts;
						this.bgImageUrl = res.data.data.bgImageUrl;
						this.isGetData = true;
					}).catch(err => {
						console.log(err);
						this.isGetData = false;
					})
				}
			},

			toDifferentPage(item) {
				if (item.menuId === 1) {
					// 去我的积分页面
					// uni.navigateTo({
					// 	url: '/pages/tabBar/template/signIn/signInPage'
					// })
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				} else if (item.menuId === 2) {
					// 去我的订单页面
					// uni.navigateTo({
					// 	url: `/pages/order/myOrderPage?userAid=${this.userAid}`
					// })
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				} else if (item.menuId === 3) {
					// 去浏览历史页面
					// uni.navigateTo({
					// 	url: '/pages/tabBar/template/history/myHistoryRecord'
					// })
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				} else if (item.menuId === 4) {
					// 去邀请好友页面
					// uni.navigateTo({
					// 	url: '/pages/tabBar/template/friend/inviteFriends'
					// })
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				} else if (item.menuId === 5) {
					// 去我的钱包页面
					// uni.navigateTo({
					// 	url: '/pages/tabBar/template/wallet/myWallet'
					// })
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				} else if (item.menuId === 6) {
					// 去优惠券页面
					// uni.navigateTo({
					// 	url: '/pages/tabBar/template/coupon/myCoupon'
					// })
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style>
	@import '../../../common/uni-nvue.css';
	@import './templateStyle.css';
</style>